// 引入监听是否进入视口
import { useIntersectionObserver } from '@vueuse/core'
import defaltImg from '@/assets/images/loading.gif'
const imgLazy = {
  mounted (el, binding) {
    const { stop } = useIntersectionObserver(
      el,
      ([{ isIntersecting }]) => {
        // 进入可视区
        if (isIntersecting) {
          // 添加loading图片
          el.src = defaltImg
          setTimeout(() => {
            el.src = binding.value
          }, 500)

          el.onerror = () => {
            el.src = defaltImg
          }

          stop()
        }
      },
      { threshold: 0.5 }
    )
  }
}

export default {
  install (app) {
    app.directive('imgLazy', imgLazy)
  }
}
